
import React from 'react';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { RouteLayout,Browser,Upload } from 'weaver-mobile-page';
import { WingBlank, WhiteSpace, List, InputItem,Icon,Modal,Bubble,ActivityIndicator,Tools } from 'weaver-mobile';
const { FormItem } = List;
const ButtonGroup = RouteLayout.ButtonGroup;
const alert = Modal.alert;
const getLabel = Tools.getLabel;
@inject('businessCardStore')
@withRouter
@observer
export default class BusinessCard extends React.Component {

    constructor(props) {
        super(props);
        this.state = ({
            valueArray:[],
        });
    }

    componentDidMount() {
        const store = this.props.businessCardStore;
        store.initForm(this.props);
    }


    render() {
        const { history, businessCardStore } = this.props;
        const { files, buttonProps,browser,formParams,showImage,imageIndex,complete,uploadStore,datasImg } = businessCardStore;

        let buttonGroupData = [];
        buttonGroupData.push({
            key: 'clear',
            text: getLabel('201','取消'),
            onClick: () => alert('',getLabel('390915','确定要离开吗?'), [
                { text: getLabel('201','取消'), onPress: () => { } },
                { text: getLabel('83446','确定'), onPress: () => this.goBack()},
            ])
        });
        buttonGroupData.push({
            key: 'submit',
            text: getLabel('615','提交'),
            onClick: () => this.buttonClick(),
            type: 'primary',
            disabled: buttonProps.disabled,
            loading: buttonProps.loading
        });

        if(complete){
            return (
                <div className={"crm-form-main"}>
                    <div className="crm-form-content">
                        <WhiteSpace size="lg" /><WhiteSpace size="lg" />
                        <WingBlank>
                            <Upload
                                uploadUrl="/api/doc/upload/uploadFile"
                                store={uploadStore}
                                datas={toJS(datasImg)}
                                listType="img"
                                //editable={true}
                                onChange={this.onChangeImg}
                                limitType="jpg,jpeg,png"
                                maxFilesNumber={1}
                                selectable={datasImg.length === 0}
                                note={getLabel('390936',"请选择名片正面(支持格式：jpg,jpeg)")}
                                editable={false}
                            />
                        </WingBlank>
                        <List renderHeader={<div className="crm-form-card-header" >{getLabel('388614','识别结果')}</div>}>
                            <FormItem
                                key={1}
                                label={getLabel('413','姓名')}
                                wrap="nowrap"
                                line
                                required={formParams.fieldname_fullname?"":"required"}
                                content={(<InputItem placeholder="请输入" value={formParams.fieldname_fullname} onChange={(v)=>this.inputChange({'fieldname_fullname':v})}/>)}
                               
                            />
                            <FormItem
                                key={2}
                                label={getLabel('357','职务')}
                                wrap="nowrap"
                                line
                                content={(<InputItem placeholder="请输入" value={formParams.fieldname_jobtitle} onChange={(v)=>this.inputChange({'fieldname_jobtitle':v})}/>)}
                            />
                            {/* <FormItem
                                key={3}
                                label="部门"
                                wrap="nowrap"
                                line
                                content={(<InputItem placeholder="请输入" onChange={(v)=>this.inputChange({fieldname_fullname:v})}/>)}
                            /> */}
                            <FormItem
                                key={4}
                                label={getLabel('1976','公司名称')}
                                wrap="nowrap"
                                line
                                required={formParams.fieldname_customername?"":"required"}
                                extra={
                                    <Browser
                                        label=""
                                        store={browser}
                                        hasAdvanceSerach
                                        type={7}
                                        onChange={(value, valueSpan, valueArray) => {this.onBrowserChange(value,valueSpan,valueArray)}}
                                        dataParams={{'sharelevel':2}}
                                        conditionDataParams={{'name':formParams.fieldname_customername}}
                                        valueArray={this.state.valueArray}
                                    >
                                        <Icon key="right" type="right"/>
                                    </Browser>
                               }
                                content={(<InputItem placeholder={getLabel("83869","请输入")} value={formParams.fieldname_customername} onChange={(v)=>this.inputChange({'fieldname_customername':v})}/>)}
                            />
                            <FormItem
                                key={5}
                                label={getLabel('620','移动电话')}
                                wrap="nowrap"
                                line
                                content={(<InputItem placeholder={getLabel("83869","请输入")} value={formParams.fieldname_phoneoffice} onChange={(v)=>this.inputChange({'fieldname_phoneoffice':v})}/>)}
                            />
                            <FormItem
                                key={6}
                                label={getLabel('84386','电子邮箱')}
                                wrap="nowrap"
                                line
                                content={(<InputItem placeholder={getLabel("83869","请输入")} value={formParams.fieldname_email} onChange={(v)=>this.inputChange({'fieldname_email':v})}/>)}
                            />
                        </List>
                    </div>
             
                    <ButtonGroup data={buttonGroupData} />
                </div>
            )
        }else{
            return <div className="crm-bg-loading"><ActivityIndicator text="Loading..."/></div>
        }
           
    }

    buttonClick = () => {
        const store = this.props.businessCardStore;
        store.buttonClick();
    }

    onChangeImg = (ids, datasImg) => {
        const store = this.props.businessCardStore;
        store.onChangeImg(ids, datasImg);
    }

    inputChange = (param) =>{
        const store = this.props.businessCardStore;
        store.setFormParams(param);
        if(param.fieldname_customername){
            this.setState({valueArray:[]}) 
        }
    }

    onBrowserChange = (value, valueSpan,valueArray) =>{
        if(valueSpan){
            this.inputChange({'fieldname_customername':valueSpan});
        }
        if(value){
            this.inputChange({'fieldname_customerid':value});
        }
    }

    goBack = () =>{
        Bubble.hide();
        const { history,businessCardStore} = this.props;
        history.go(-1);
        businessCardStore.clearForm();
    }
}